<div>
    <div class="usermsg">
        <div>
            <div><b>用户名</b></div>
            <div class="user_msg username"></div>
        </div>
        <div>
            <div><b>姓 名</b></div>
            <div class="user_msg realname"></div>
        </div>
        <div>
            <div><b>手机号</b></div>
            <div class="user_msg telephone"></div>
        </div>
        <div>
            <div><b>性 别</b></div>
            <div class="user_msg gender"></div>
        </div>
        <div>
            <div><b>出生年月</b></div>
            <div class="user_msg birth"></div>
        </div>
        <div>
            <div><b>注册时间</b></div>
            <div class="user_msg registerTime"></div>
        </div>
        <div>
            <div><b>状 态</b></div>
            <div class="user_msg status"></div>
        </div>

    </div>

    <!-- 新增修改的模态框Modal -->
    <div class="modal fade" id="MymsgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
                </div>
                <div class="modal-body">
                    <div class="dialog-center">
                        <div>
                            用户名:
                            <input class="form-control" type="text" name="username" id="disabledInput" disabled>
                        </div>
                        <div>
                            密码:
                            <input class="form-control" type="text" name="password">
                        </div>
                        <div>
                            姓名:
                            <input class="form-control" type="text" name="realname">
                        </div>
                        <div>
                            状态:
                            <input class="form-control" type="text" name="status">
                        </div>
                        <div>
                            电话:
                            <input class="form-control" type="text" name="telephone">
                        </div>
                        <div class="radio-inline">
                            性别:
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="gender" value="male" checked="true">男
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="gender" value="female">女
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                    <button type="button" class="btn btn-primary" id="mymsg_submit">提交</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var token = sessionStorage.getItem('token')
        $.get(baseURL + '/user/info', {
            token: token
        }, function(res) {
            // console.log(res);
            console.log(res.data.username);
            $('.username').append(res.data.username)
            $('.realname').append(res.data.realname)
            $('.telephone').append(res.data.telephone)
            $('.gender').append(res.data.gender === 'male' ? '男' : '女')
            $('.birth').append(new Date(res.data.birth).toLocaleDateString())
            $('.registerTime').append(new Date(res.data.registerTime).toLocaleString())
            $('.status').append(res.data.status)
            btn = (`<button data-item='${JSON.stringify(res.data)}' id="user_update" class="btn btn-primary" data-toggle="modal" data-target="#MymsgModal">修改</button>`)
            $('.usermsg').append(btn)
        })

        //修改功能事件代理 id="user_update"
        $('.usermsg').on('click', '#user_update', function() {
            // alert()
            user = $(this).attr('data-item');
            user = JSON.parse(user);
            console.log(user);
            $('input[name=username]').val(user.username);
            $('input[name=password]').val(user.password);
            $('input[name=realname]').val(user.realname);
            $('input[name=telephone]').val(user.telephone);
            $('input[name=status]').val(user.status);
            $('input[name=gender][value=' + user.gender + ']').prop('checked', true);
            //设置模态框标题
            $('.modal-title').html('修改用户信息')
        });

        //新增修改提交按钮  新增:保存数据  修改:更新数据   传id代表修改,不传id代表新增
        $("#mymsg_submit").click(function() { //给后加的节点绑定事件
            //获取用户输入的信息
            var username = $('input[name=username]').val();
            var password = $('input[name=password]').val();
            var realname = $('input[name=realname]').val();
            var telephone = $('input[name=telephone]').val();
            var status = $('input[name=status]').val();
            var gender = $('input[name=gender]:checked').val();
            // console.log(username, password, realname, telephone, gender);
            //访问后台接口,保存到数据库,保存成功之后刷新数据
            $.post(baseURL + '/baseUser/saveOrUpdate', {
                id: user.id,
                username: username,
                password: password,
                realname: realname,
                telephone: telephone,
                status: status,
                gender: gender
            }, function(res) {
                //提示保存成功
                if (res.status == 200) {
                    // alert('保存成功');
                    $('.container-left li').eq(7).trigger('click');

                }
            });
            $("#MyModal").modal("hide")
            $('.modal-backdrop').remove(); //去掉遮罩层
        })
    </script>

    <style>
        * {
            line-height: 32px;
        }
        
        .usermsg>div>div {
            display: inline-block;
        }
    </style>
</div>